<template>
	<Form ref="form" :model="formData" label-position="top" :rules="rules">
		<FormDescItem label="设置退货时间" desc="设置库存下降时机，默认为当用户下单成功时商品库存下降">
			<RadioGroup v-model="formData.return_type">
                <Radio label="0">发货后可申请退换货</Radio>
                <Radio label="1">确认收货后可申请退换货</Radio>
            </RadioGroup>
		</FormDescItem>
		<FormDescItem label="设置退货发货时限" desc="设置退货申请通过后多少天未发货自动取消退货">
			<Input v-model="formData.return_confirm_day" placeholder="天" number :disabled="formData.return_confirm_day_disabled">
				<Checkbox v-model="formData.return_confirm_day_disabled" slot="append">禁用</Checkbox>
			</Input>
		</FormDescItem>
		<FormDescItem label="售后单位" prop="return_name">
			<Input v-model="formData.return_name" />
		</FormDescItem>
		<FormDescItem label="售后电话" prop="return_tel" desc="退换货、退款联系电话">
			<Input v-model="formData.return_tel" />
		</FormDescItem>
		<FormDescItem label="售后地址" prop="return_area">
			<Cascader v-model="formData.return_area" :data="areaDatas"></Cascader>
		</FormDescItem>
		<FormDescItem label="详细地址" prop="return_address" desc="退换货回寄详细地址">
			<Input v-model="formData.return_address" />
		</FormDescItem>
		<FormItem>
			<Button type="primary" :disabled="committing" @click="handleSubmit">{{committing ? '提交中...' : '保存设置'}}</Button>
		</FormItem>
	</Form>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
export default {
	components: {
		FormDescItem
	},
	data() {
		var validPhone = (rule, value, callback) => {
			var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //手机号码
			var isMob = /^0?1[3|4|5|8][0-9]\d{8}$/; // 座机格式
			if(isMob.test(value) || isPhone.test(value)) {
				callback();
			} else {
				callback('请填写正确的联系方式');
			}
		};
		return {
			committing: false,
			areaDatas: [],
			formData: {
				return_type: '0',
				return_confirm_day: 1,
				return_confirm_day_disabled: false,
				return_name: '',
				return_tel: '',
				return_area: [],
				return_province: '',
				return_city: '',
				return_county: '',
				return_address: ''
			},
			rules: {
				return_name: [
					{required: true, message: "请填写售后单位", trigger: "blur"}
				],
				return_tel: [
					{required: true, message: "请填写售后联系电话", trigger: "blur"},
					{ validator: validPhone, trigger: 'blur' }
				],
				return_area: [
					{required: true, type: 'array', message: "请选择售后地址", trigger: "change"}
				],
				return_address: [
					{required: true, message: "请填写退换货回寄详细地址", trigger: "blur"}
				]
			}
		}
	},
	computed: {
		configure() {
			return this.$store.state.config.configure;
		},
		areas () {
            return this.$store.state.app.areas;
        }
	},
	mounted() {
		this.init();
		this.initArea();
	},
	watch: {
		configure: {
			deep: true,
			handler() {
				this.init();
			}
		},
		areas: {
			deep: true,
			handler() {
				this.initArea();
			}
		}
	},
	methods: {
		init() {
			let configure = this.configure;
			if(configure && JSON.stringify(configure) != '{}') {
				this.formData.return_type = configure.return_type;
				this.formData.return_name = configure.return_name;
				this.formData.return_tel = configure.return_tel;
				this.formData.return_address = configure.return_address;
				if(configure.return_province) {
					this.formData.return_area = [Number(configure.return_province), Number(configure.return_city), Number(configure.return_county)];
				}
				if(configure.return_confirm_day == '0') {
					this.formData.return_confirm_day = null;
					this.formData.return_confirm_day_disabled = true;
				}else{
					this.formData.return_confirm_day = Number(configure.return_confirm_day);
				}
			}
		},
		initArea() {
			if(this.areas.length > 0) {
				this.areaDatas = this.areas[0].children;
			}
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	let form = this.formData;
		        	let params = {
		        		return_type: form.return_type,
		        		return_confirm_day: form.return_confirm_day,
		        		return_name: form.return_name,
		        		return_tel: form.return_tel,
		        		return_province: form.return_area[0],
		        		return_city: form.return_area[1],
		        		return_county: form.return_area[2],
		        		return_address: form.return_address
		        	}
		        	if(form.return_confirm_day_disabled) {
		        		params.return_confirm_day = '0';
		        	}
		        	this.committing = true;
		        	Util.ajax.post(this.API['API_SETTING_SAVE'], {data: params}).then(res => {
		        		this.committing = false;
		        		this.$Message.success('保存成功');
		        		// 同步本地数据
		        		let configure = this.configure;
		        		for(let k in params) {
		        			configure[k] = params[k];
		        		}
		        		this.$store.commit('setSystemConfig', configure);
		        	}).catch(() => {
		        		this.committing = false;
		        	})
                }
            });
		}
	}
}
</script>